<template>
  <div>
    <p style="display: flex">
      <el-button type="info" icon="el-icon-refresh" size="mini"
                 @click="list()">刷新
      </el-button>
      <el-button type="info" size="mini"
                 @click="dialogVisible=true">添加
      </el-button>
      <el-button type="info" icon="el-icon-refresh" size="mini"
                 @click="list()">刷新
      </el-button>
    </p>
    <p style="display: flex">
      <el-pagination
          background
          layout="prev, pager, next"
          :page-size="pageInfo.size"
          :current-page="pageInfo.page"
          @current-change="list"
          :total="pageInfo.total">
      </el-pagination>
      <el-select v-model="pageInfo.size" placeholder="请选择"
                 @change="list(1)">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"

            :value="item.value">
        </el-option>
      </el-select>
    </p>
    <div>
      <el-dialog title="添加小节" :visible.sync="dialogVisible">
        <el-form :model="form">

          <el-form-item label="标题" :label-width="formLabelWidth">
            <el-input v-model="form.title" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="课程" :label-width="formLabelWidth">
            {{ course.name }}
          </el-form-item>

          <el-form-item label="大章" :label-width="formLabelWidth">
            {{ chapter.name }}
          </el-form-item>

          <el-form-item label="视频" :label-width="formLabelWidth">
            <el-upload
                class="upload-course-video"
                action="http://localhost:9000/file/admin/upload"
                :on-success="uploadVideoSuccess"
                :data="uploadData"
                accept="video/*"
                show-file-list="true">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传视频文件，且不超过50MB</div>
            </el-upload>
          </el-form-item>


          <el-form-item label="时长" :label-width="formLabelWidth">
            <el-input v-model="form.time" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="收费" :label-width="formLabelWidth">
            <el-select v-model="form.charge" placeholder="请选择">
              <el-option
                  v-for="item in SECTION_CHARGE"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key">
              </el-option>
            </el-select>
          </el-form-item>


          <el-form-item label="顺序" :label-width="formLabelWidth">
            <el-input v-model="form.sort" autocomplete="off"></el-input>
          </el-form-item>


          <el-form-item label="vod" :label-width="formLabelWidth">
            <el-input v-model="form.vod" autocomplete="off"></el-input>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogCancel">取 消</el-button>
          <el-button type="primary" @click="saveSection">确 定</el-button>
        </div>
      </el-dialog>
      <el-table
          :data="pageInfo.list"
          style="width: 100%">
        <el-table-column
            prop="id"
            label="id"
            width="180">
        </el-table-column>
        <el-table-column
            prop="title"
            label="标题"
            width="180">
        </el-table-column>
        <el-table-column
            prop="courseId"
            label="课程"
            width="180">
        </el-table-column>
        <el-table-column
            prop="chapterId"
            label="大章"
            width="180">
        </el-table-column>
        <el-table-column
            prop="video"
            label="视频"
            width="180">
        </el-table-column>
        <el-table-column
            label="时长"
            width="180">
          <template slot-scope="scope">
            {{ scope.row.time | formatSecond }}
          </template>
        </el-table-column>
        <el-table-column
            label="收费"
            width="180">
          <template slot-scope="scope">
            {{ SECTION_CHARGE | optionKV(scope.row.charge) }}
          </template>
        </el-table-column>
        <el-table-column
            prop="sort"
            label="顺序"
            width="180">
        </el-table-column>
        <el-table-column
            prop="createdAt"
            label="创建时间"
            width="180">
        </el-table-column>
        <el-table-column
            prop="updatedAt"
            label="修改时间"
            width="180">
        </el-table-column>
        <el-table-column
            prop="vod"
            label="vod"
            width="180">
        </el-table-column>

        <el-table-column
            fixed="right"
            label="操作"
            width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>

<script>
import {section, deleteSection, saveSection} from "@/network/section";
import {Confirm} from '@/assets/js/confirm'
import {Validator} from "@/assets/js/validator";

export default {
  name: "section",
  mounted() {
    let _this = this;
    let chapter = SessionStorage.get("chapter") || {};
    let course = SessionStorage.get("course") || {};
    if (Tool.isEmpty(chapter) || Tool.isEmpty(course)) {
      this.$router.push("/welcome");
    }
    _this.course = course;
    _this.chapter = chapter;

    this.list(1)
  },
  data() {
    return {
      SECTION_CHARGE: SECTION_CHARGE,
      pageInfo: {
        page: 1,
        size: 1,
        list: [],
        total: 0,
        courseId: '',
        chapterId: '',
      }, options: [
        {
          value: 1,
          label: 1
        },
        {
          value: 5,
          label: 5
        },
        {
          value: 10,
          label: 10
        },
        {
          value: 50,
          label: 50
        },],
      dialogVisible: false,
      form: {},
      formLabelWidth: '120px',
      course: {},
      chapter: {},
      uploadData: {
        use: FILE_USE.COURSE.key,
      }
    }
  },
  methods: {
    list(page) {
      if (page === null || page === undefined) {
        page = this.pageInfo.page
      }
      let _this = this;
      _this.pageInfo.list = [];
      _this.pageInfo.courseId = _this.chapter.courseId;
      _this.pageInfo.chapterId = _this.chapter.id;
      section(_this.pageInfo).then(res => {
        _this.pageInfo = res.data
      })
    },
    saveSection() {
      let _this = this;
      // 保存校验
      if (1 !== 1
          || !Validator.require(_this.form.title, "标题")
          || !Validator.length(_this.form.title, "标题", 1, 50)
          || !Validator.length(_this.form.video, "视频", 1, 200)
      ) {
        return;
      }

      _this.form.courseId = _this.chapter.courseId;
      _this.form.chapterId = _this.chapter.id;

      saveSection(_this.form).then(res => {
        _this.$message.success("保存成功");
        _this.form = {}
        _this.dialogVisible = false;
        _this.list()
      })
    },
    edit(row) {
      console.log(row);
      let _this = this;
      _this.form = Object.assign({}, row)
      _this.dialogVisible = true;
    },
    del(row) {
      let _this = this;
      Confirm.show('此操作将永久删除该文件, 是否继续?', function () {
        deleteSection(row.id).then(res => {
          _this.list();
          _this.$message({
            type: 'success',
            message: '删除成功!'
          });
        })
      })

    },
    dialogCancel() {
      let _this = this;
      _this.form = {};
      _this.dialogVisible = false;
    },
    uploadVideoSuccess(res, file) {
      let _this = this;
      console.log(file);
      _this.form.video = res.data;
      let audio = new Audio(res.data)// 元数据已加载
      audio.addEventListener("loadedmetadata", function (e) {
        let duration = audio.duration;
        _this.form.time = Math.ceil(duration);
      });

    }
  }
}
</script>

<style scoped>

</style>
